<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>html-sketchapp - Images</title>
  <style>
    .image {
      width: 300px;
    }
  </style>
</head>

<body>
  <h3>JPG</h3>
  <img src='./assets/blue.jpg' class='image' />
  <h3>PNG</h3>
  <img src='./assets/red.png' class='image' />
  <h3>GIF</h3>
  <img src='./assets/yellow.gif' class='image' />
  <h3>SVG</h3>
  <img src='./assets/green.svg' class='image' />
  <h3>srcset</h3>
  <img srcset='./assets/yellow.gif, ./assets/red.png 2x' class='image' />
  <h3>base64 SVG data: URL</h3>
  <img src=""
    class="image" />
  <h3>plaintext SVG data: URL</h3>
  <img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21--%20Created%20with%20Inkscape%20%28http%3A%2F%2Fwww.inkscape.org%2F%29%20--%3E%0A%3Csvg%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20version%3D%221.0%22%0A%20%20%20width%3D%22100%22%0A%20%20%20height%3D%22100%22%0A%20%20%20id%3D%22svg7011%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs7013%22%20%2F%3E%0A%20%20%3Cg%0A%20%20%20%20%20id%3D%22layer1%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22M%2091.862889%2C4.4383237%20C%2048.27099%2C86.70242%2048.27099%2C86.70242%2048.27099%2C86.70242%20L%205.1194141%2C58.161817%22%0A%20%20%20%20%20%20%20style%3D%22fill%3Anone%3Bfill-rule%3Aevenodd%3Bstroke%3A%23008000%3Bstroke-width%3A18.35099983%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20id%3D%22path7019%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
    class="image" />

</body>

</html>
